<template>
  <div class="xtx-skeleton" :style="{ width, height }">
    <div class="box"></div>
    <span class="shan"></span>
  </div>
</template>

<script>
export default {
  name: 'xtx-skeleton',
  props: {
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '50px'
    }
  }
}
</script>

<style scoped lang='less'>
.xtx-skeleton {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
  .box {
    width: 100%;
    height: 100%;
    background: #efefef;
    border-radius: 4px;
  }
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}
.shan {
  position: absolute;
  animation: shan 1.5s ease 0s;
  top: 0;
  width: 30%;
  height: 100%;
  content: "";
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-45deg);
  animation-iteration-count: infinite;
}
</style>
